<!-- eslint-disable no-undef -->

<template>
  <div id="map"></div>
</template>

<script setup>
import { onMounted } from "vue";
import { app } from "@/main.js";
import { gaode_scl1 } from "@/plugins/Layers";
onMounted(() => {
  const map = new ol.Map({
    target: "map",
    layers: [gaode_scl1],
    view: new ol.View({
      center: [114.3, 30.5],
      zoom: 9,
      projection: "EPSG:4326",
    }),
    
    controls: []

  });
//   map.getView().animate({
//       center:[114,30],
//       zoom:10,
//       duration:1000
// })

  app.config.globalProperties.$map = map;
});
</script>

<style scoped>
#map {
width: 100%;
height: 100vh;
}
</style>
